<template>
    <div>
        <el-header>
            <headers1>
                <h4 slot="title">我的购物车</h4>
            </headers1>
        </el-header>
        <el-main style="margin-top:1rem;">
            <el-row>
                <el-table ref="multipleTable" :data="shoppingcartlist" tooltip-effect="dark" style="width: 100%"
                    empty-text="购物车内没有商品" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="商品" width="400">
                        <template slot-scope="scope">
                            <el-row>
                                <el-col :span="3">
                                    <img :src="scope.row.commodity.listPic" style="width:50px;height:50px;">
                                </el-col>
                                <el-col :offset="1" :span="19">
                                    <p>{{scope.row.commodity.commodityName}}</p>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="commodity.price" label="价格" width="150">
                    </el-table-column>
                    <el-table-column label="数量">
                        <template slot-scope="scope">
                            <el-input-number :min="1" size="mini" v-model="scope.row.num"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column label="小计">
                        <template slot-scope="scope">
                            {{scope.row.num*scope.row.commodity.price}}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="del(scope.$index,scope.row)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row style="margin-top:20px;">
                <el-card shadow="never">
                    <el-row>
                        <el-col :span="12">
                            总计：{{total}}
                        </el-col>
                        <el-col :span="12" style="text-align:right;">
                            <el-button type="danger" @click="skip_settlement">立即结算</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-row>
        </el-main>
    </div>
</template>

<style scoped>

</style>

<script>
    import headers1 from '@/components/headers1.vue'
    export default {
        data: function () {
            return {
                shoppingcartlist: [],
                selection: []

            }
        },
        components: {
            headers1
        },
        methods: {
            del(index, row) {
                let token = localStorage.getItem('token')
                if (token != null) {
                    this.$axios.delete(this.$store.state.base_url + '/shoppingcart/?token=' + token + "&id=" + row.id)
                        .then(
                            data => {
                                if (data.data.code == "SUCCESS") {
                                    this.shoppingcartlist.splice(index, 1)
                                } else {
                                    this.$message.error(data.data.message);
                                }

                            })
                }

            },
            handleSelectionChange(selection) {
                console.log(selection)
                this.selection = selection
            },
            skip_settlement() {
                let token = localStorage.getItem('token')
                if(this.shoppingcartlist.length==0){
                    this.$message({
                            message: '购物车内没有数据',
                            type: 'warning'
                        });
                    return;
                }
                if (token != null) {
                    //更新购物车
                    this.$axios.put(this.$store.state.base_url + '/shoppingcart/updatelist?token=' + token, this
                        .selection).then(data => {
                        if (data.data.code == "SUCCESS") {
                            this.$router.push("settlement?from=shoppingcart")
                        } else {
                            this.$message.error(data.data.message);
                        }
                    })
                }

            },

        },

        created() {
            let token = localStorage.getItem('token')
            if (token != null) {
                this.$axios.get(this.$store.state.base_url + '/shoppingcart/findallwithcommodity?token=' + token).then(
                    data => {
                        console.log("+++++++++++++++++++++++")
                        console.log(data)
                        let shoppingcartlist = data.data.data
                        this.shoppingcartlist = shoppingcartlist
                        //console.log(shoppingcartlist)
                        //设置选中
                        this.$refs.multipleTable.toggleAllSelection();

                    })
            }else{
                this.$message.error("请先进行登陆");
                this.$router.push("login")
            }

        },
        computed: {
            "total": function () {
                let total = 0
                for (const iterator of this.selection) {
                    total += iterator.num * iterator.commodity.price
                }
                return total
            }
        }



    }
</script>